<template>
  <!--我的团队-->
  <div class="my-team-container" style="height: 100%">
    <mp-navbar
      v-model="activeIndex"
      :columns="columns"
      @input="input"
    >
      <mp-navbar-panel :active-index="activeIndex" :index="activeIndex" :lists="lists" :scroll_view_height="scroll_view_height" :styleScroll="styleScroll">
        <scroll-view class="nav-scroll-view"  :style="styleScroll"  @scrolltolower="bottomLoad" @scrolltoupper="topLoad" scroll-y="true" @scroll="scroll">
          <div class="list-item" v-for="(item,index) in lists">
            <div class="avatar">
              <div v-if="item.role == 1" class="dengji iconfont icon-dengji"></div>
              <div v-if="item.role == 2" class="dengji iconfont icon-dengji4"></div>
              <div v-if="item.role == 3" class="dengji iconfont icon-bojin"></div>
              <div v-if="item.role == 4" class="dengji iconfont icon-dengji3"></div>
              <img :src="item.avatar" alt="">
            </div>
            <div class="avatar-name">{{item.name}}{{index}}</div>
            <div class="dengji-name">
              <span>{{item.role_name}}</span></div>
          </div>
        </scroll-view>
      </mp-navbar-panel>
    </mp-navbar>
    <!--<div class="nav-title">这是一个navBar</div>-->
    <!--<scroll-view class="nav-scroll-view" :style="styleScroll" @scrolltolower="bottomLoad" @scrolltoupper="topLoad" scroll-y="true" @scroll="scroll">-->
    <!--<div class="list-item" v-for="(item,index) in lists">-->
    <!--<div class="avatar">-->
    <!--<div v-if="item.role == 1" class="dengji iconfont icon-dengji"></div>-->
    <!--<div v-if="item.role == 2" class="dengji iconfont icon-dengji4"></div>-->
    <!--<div v-if="item.role == 3" class="dengji iconfont icon-bojin"></div>-->
    <!--<div v-if="item.role == 4" class="dengji iconfont icon-dengji3"></div>-->
    <!--<img :src="item.avatar" alt="">-->
    <!--</div>-->
    <!--<div class="avatar-name">{{item.name}}{{index}}</div>-->
    <!--<div class="dengji-name">-->
    <!--<span>{{item.role_name}}</span></div>-->
    <!--</div>-->
    <!--</scroll-view>-->
  </div>
</template>

<script type="text/ecmascript-6">
  import mpNavbar from '../../../packages/navbar';
  import mpNavbarPanel from '../../../packages/navbar-panel';
  export default {
    data() {
      return {
        test:2,
        columns: ['I级', 'II级', 'III级'],
        activeIndex: 0,
        scroll_view_height: 0,
        lists:[
          {
            avatar: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1542570599380&di=a2bfdd65abc2d306db34501dbf615913&imgtype=0&src=http%3A%2F%2Fpic30.nipic.com%2F20130605%2F7447430_151725906000_2.jpg',
            name: 'iceboy',
            role: '1',
            role_name: '好拼用户'
          },
          {
            avatar: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1542570599380&di=a2bfdd65abc2d306db34501dbf615913&imgtype=0&src=http%3A%2F%2Fpic30.nipic.com%2F20130605%2F7447430_151725906000_2.jpg',
            name: 'iceboy',
            role: '2',
            role_name: '普通店长'
          },
          {
            avatar: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1542570599380&di=a2bfdd65abc2d306db34501dbf615913&imgtype=0&src=http%3A%2F%2Fpic30.nipic.com%2F20130605%2F7447430_151725906000_2.jpg',
            name: 'iceboy',
            role: '3',
            role_name: '铂金店长'
          },
          {
            avatar: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1542570599380&di=a2bfdd65abc2d306db34501dbf615913&imgtype=0&src=http%3A%2F%2Fpic30.nipic.com%2F20130605%2F7447430_151725906000_2.jpg',
            name: 'iceboy',
            role: '4',
            role_name: '至尊店长'
          },
          {
            avatar: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1542570599380&di=a2bfdd65abc2d306db34501dbf615913&imgtype=0&src=http%3A%2F%2Fpic30.nipic.com%2F20130605%2F7447430_151725906000_2.jpg',
            name: 'iceboy',
            role: '1',
            role_name: '好拼用户'
          },
          {
            avatar: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1542570599380&di=a2bfdd65abc2d306db34501dbf615913&imgtype=0&src=http%3A%2F%2Fpic30.nipic.com%2F20130605%2F7447430_151725906000_2.jpg',
            name: 'iceboy',
            role: '2',
            role_name: '普通店长'
          },
          {
            avatar: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1542570599380&di=a2bfdd65abc2d306db34501dbf615913&imgtype=0&src=http%3A%2F%2Fpic30.nipic.com%2F20130605%2F7447430_151725906000_2.jpg',
            name: 'iceboy',
            role: '3',
            role_name: '铂金店长'
          },
          {
            avatar: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1542570599380&di=a2bfdd65abc2d306db34501dbf615913&imgtype=0&src=http%3A%2F%2Fpic30.nipic.com%2F20130605%2F7447430_151725906000_2.jpg',
            name: 'iceboy',
            role: '4',
            role_name: '至尊店长'
          },
          {
            avatar: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1542570599380&di=a2bfdd65abc2d306db34501dbf615913&imgtype=0&src=http%3A%2F%2Fpic30.nipic.com%2F20130605%2F7447430_151725906000_2.jpg',
            name: 'iceboy',
            role: '1',
            role_name: '好拼用户'
          },
          {
            avatar: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1542570599380&di=a2bfdd65abc2d306db34501dbf615913&imgtype=0&src=http%3A%2F%2Fpic30.nipic.com%2F20130605%2F7447430_151725906000_2.jpg',
            name: 'iceboy',
            role: '2',
            role_name: '普通店长'
          },
          {
            avatar: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1542570599380&di=a2bfdd65abc2d306db34501dbf615913&imgtype=0&src=http%3A%2F%2Fpic30.nipic.com%2F20130605%2F7447430_151725906000_2.jpg',
            name: 'iceboy',
            role: '3',
            role_name: '铂金店长'
          },
          {
            avatar: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1542570599380&di=a2bfdd65abc2d306db34501dbf615913&imgtype=0&src=http%3A%2F%2Fpic30.nipic.com%2F20130605%2F7447430_151725906000_2.jpg',
            name: 'iceboy',
            role: '4',
            role_name: '至尊店长'
          }
        ]
      }
    },
    components: {
      mpNavbar,
      mpNavbarPanel
    },
    methods: {
      input(index) {
        console.log('index = ', index)
        this.activeIndex = index
      },
      bottomLoad() {
        console.log('bottomLoad')
      },
      topLoad() {
        console.log('topLoad')
      }
    },
    created() {
    },
    computed: {
      styleScroll() {
        console.log('this.scroll_view_height = ', this.scroll_view_height)
        return 'height:' + this.scroll_view_height
      }
    },
    onLoad() {
      wx.getSystemInfo({
        success (res) {
          console.log('res = ', res)
        }
      })
    },
    mounted() {
      console.log('wx.getSystemInfoSync().windowWidth = ' + wx.getSystemInfoSync().windowWidth)   // 获取当前窗口的宽度
      console.log('wx.getSystemInfoSync().windowHeight = ' + wx.getSystemInfoSync().windowHeight)    // 获取当前窗口的高度
      var height = wx.getSystemInfoSync().windowHeight
      var query = wx.createSelectorQuery();
      query.select('.weui-navbar').boundingClientRect()
      query.select('.nav-scroll-view').boundingClientRect()
      query.select('.page').boundingClientRect()
      query.exec((res) => {
//        var listHeight = res[0].height; // 获取list高度
        console.log('res = ', res)
        console.log('wx.getSystemInfoSync().windowHeight - res[0].height = ' +  height - res[0].height)
        console.log('wx.getSystemInfoSync().windowHeight = ' + typeof wx.getSystemInfoSync().windowHeight)
        console.log('res[0].height = ' + typeof res[0].height)
//        this.scroll_view_height = (wx.getSystemInfoSync().windowHeight - res[0].height) + 'px'
        this.scroll_view_height = (wx.getSystemInfoSync().windowHeight - res[0].height) + 'px'
        console.log('this.scroll_view_height  = ' + this.scroll_view_height)
//        this.scroll_view_height = '302px'
      })
    }
  }
</script>

<style rel="stylesheet/scss" lang="scss">
  .my-team-container{
    .weui-navbar{
      height: 50px;
    }
    .nav-scroll-view{
      /*height: calc(667px + 40px);*/
      /*height: 573px;*/
      /*height: 552px;*/
    }
    /*height: 100%;*/
    background-color: #fafafa;
    /*height: 667px;*/
    .weui-tab__panel{
      /*height: 100%;*/
      /*height: 552px;*/
    }
    .weui-navbar{
      background-color: white;
    }
    .list-item{
      display: flex;
      flex-direction: row;
      border-bottom: 1px solid #ebebeb;
      width: 355px;
      padding-top: 10px;
      padding-bottom: 10px;
      margin:0 auto;
      .avatar{
        height: 50px;
        /*width: 60px;*/
        position: relative;
        flex:2;
        .dengji{
          color: #fee04f;
          position: absolute;
          left: 50px;
          top:25px;
        }
        img{
          height: 50px;
          width: 50px;
          border-radius: 50%;
        }
      }
      .avatar-name{
        flex:5;
        display:flex;
        align-items:center;
        margin-left:15px;
      }
      .dengji-name{
        flex:3;
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
        span{
          background-color:#e3544c;
          border-radius:16px;
          color:white;
          padding:3px;
          font-size:12px;
        }
      }
    }
  }
  .weui-navbar__slider{
    background-color: #e3544c;
  }
  .weui-navbar__item.weui-bar__item_on{
    color: #e3544c;
  }
  page {
    height: 100%;
    overflow: hidden;
  }
  .page__bd {
    padding-bottom: 0;
  }
  .weui-tab__content {
    /*padding-top: 60px;*/
    text-align: center;
    /*height: 552px;*/
  }
</style>
